<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>54-jQuery复制节点操作</title>
</head>
<body>
    <button class="first">浅复制</button>
    <button class="second">深复制</button>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      $(function(){
          //给第一个li注册事件
          $('ul>li:first').click(function(){
              alert("这是第一个li的单击事件")
          })
          //注册浅复制和深复制按钮的单击事件
          $('.first').click(function(){
              //浅复制一个节点到$li
              var $li= $('ul>li:first').clone()
              //将复制的节点添加到ul中来
              $('ul').append($li)
          })
          $('.second').click(function(){
              //浅复制一个节点到$li
              var $li= $('ul>li:first').clone(true)
              //将复制的节点添加到ul中来
              $('ul').append($li)
          })
      })
    </script>
</body>
</html>